<template>
	<scroll-view :scroll-with-animation="scorllAnimation" :scroll-x="true" :show-scrollbar="false"
		:class="['gui-scroll-x', isCenter ? 'gui-nav-center' : '']" :style="{width:width+'rpx'}"
		:scroll-left="scrollLeft">
		<view class="gui-scroll-x-item  gui-bg-white gui-columns gui-relative gui-align-items-center"
			:id="'tab-'+index+(random+'')" :style="{
			height:(lineHeight+lineHeightSamll+30)+'rpx'
		}" v-for="(item, index) in itemsIn" :key="index" @tap="navchange" :data-index="index">
			<image class="gui-list-image" mode="aspectFit" :src="item[keys[0]]"></image>
			<text class="gui-block gui-text-center" :class="[customClass, currentIndexIn == index ? activeClass : '']"
				:style="{
				lineHeight:lineHeight+'rpx', height:lineHeight+'rpx',
				fontSize:currentIndexIn == index ? activeFontSize : fontSize, 
				fontWeight:currentIndexIn == index ? 'bold' : ''
			}">{{item[keys[1]]}}</text>

		</view>
	</scroll-view>
</template>
<script>
	export default {
		name: "hyb-switch-navigation",
		props: {
			keys: {
				type: Array,
				default: ['img', 'name']
			},
			width: {
				type: Number,
				default: 690
			},
			isCenter: {
				type: Boolean,
				default: false
			},
			currentIndex: {
				type: Number,
				default: 0
			},
			size: {
				type: Number,
				default: 160
			},
			fontSize: {
				type: String,
				default: '24rpx'
			},
			activeFontSize: {
				type: String,
				default: '26rpx'
			},
			lineHeight: {
				type: Number,
				default: 52
			},
			fontSizeSmall: {
				type: String,
				default: '22rpx'
			},
			lineHeightSamll: {
				type: Number,
				default: 28
			},
			items: {
				type: Array,
				default: function() {
					return []
				}
			},
			customClass: {
				type: Array,
				default: function() {
					return ['gui-primary-text'];
				}
			},
			activeClass: {
				type: Array,
				default: function() {
					return ['gui-primary-color', 'gui-dark-text-level-1'];
				}
			},
			scorllAnimation: {
				type: Boolean,
				default: true
			},
			activeBorderClass: {
				type: Array,
				default: function() {
					return ['gui-primary-border-color'];
				}
			}
		},
		data() {
			return {
				currentIndexIn: 0,
				itemsIn: [],
				random: 1,
				scrollLeft: 0,
				scrllTimer: null
			}
		},
		created: function() {
			this.currentIndexIn = this.currentIndex;
			this.itemsIn = this.items;
			this.random = this.randomNum();
		},
		watch: {
			currentIndex: function(value) {
				this.currentIndexIn = value;
			},
			items: function(value) {
				this.itemsIn = value;
			},
			currentIndexIn: function(val) {
				if (this.isCenter) {
					return;
				}
				if (this.scrllTimer != null) {
					clearTimeout(this.scrllTimer);
				}
				this.scrllTimer = setTimeout(() => {
					this.setLeft();
				}, 200);
			}
		},
		methods: {
			navchange: function(e) {
				this.currentIndexIn = e.currentTarget.dataset.index;
				this.$emit('change', Number(e.currentTarget.dataset.index))
			},
			randomNum: function() {
				return parseInt(Math.random() * 1000);
			},
			setLeft: function() {
				if (this.isCenter) {
					return;
				}
				let that = this;
				const query = uni.createSelectorQuery()
				query.selectAll('#tab-' + 0 + (this.random + '')).boundingClientRect()
				query.selectAll('#tab-' + this.currentIndexIn + (this.random + '')).boundingClientRect()
				query.selectViewport().scrollOffset()
				query.exec((res) => {
					that.scrollLeft = Math.abs(res[0][0].left) + res[1][0].left - uni.upx2px(this.width) / 2 +
						res[1][0].width / 2;
				});
			}
		}
	}
</script>
<style scoped>
	.gui-columns {
		padding: 10rpx;
		margin-right: 20rpx;
	}

	.gui-nav-center {
		justify-content: center;
		text-align: center;
	}

	.nav2-active-line-in {
		height: 18rpx;
		overflow: hidden;
		margin-top: 6rpx;
	}

	.nav2-active-line {
		width: 18rpx;
		height: 18rpx;
		border-radius: 20rpx;
		border-width: 6rpx;
		border-style: solid;
		margin-top: -15rpx;
	}

	.gui-list-image {
		height: 58rpx;
		width: 58rpx;
	}

	/* #ifdef APP-NVUE */
	.nav2-active-line {
		width: 30rpx;
		height: 30rpx;
	}

	/* #endif */
</style>
